<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table {
				text-align: center;
			}
		</style>
	</head>

	<body>
		<table width="800" border="1" cellpadding="0" cellspacing="0">
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>爱好</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>18</td>
					<td>男</td>
					<td>唱</td>
					<td>
						<button onclick="moveUp(this)">上移</button>
						<button onclick="del(this)">删除</button>
						<button onclick="moveDown(this)">下移</button>
					</td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>18</td>
					<td>男</td>
					<td>跳</td>
					<td>
						<button onclick="moveUp(this)">上移</button>
						<button onclick="del(this)">删除</button>
						<button onclick="moveDown(this)">下移</button>
					</td>
				</tr>
				<tr>
					<td>3</td>
					<td>王五</td>
					<td>18</td>
					<td>男</td>
					<td>跳</td>

					<td>
						<button onclick="moveUp(this)">上移</button>
						<button onclick="del(this)">删除</button>
						<button onclick="moveDown(this)">下移</button>
					</td>
				</tr>
				<tr>
					<td>4</td>
					<td>赵六</td>
					<td>18</td>
					<td>男</td>
					<td>篮球</td>
					<td>
						<button onclick="moveUp(this)">上移</button>
						<button onclick="del(this)">删除</button>
						<button onclick="moveDown(this)">下移</button>
					</td>
				</tr>
				<tr>
					<td>5</td>
					<td>邹七</td>
					<td>18</td>
					<td>男</td>
					<td>篮球</td>
					<td>
						<button onclick="moveUp(this)">上移</button>
						<button onclick="del(this)">删除</button>
						<button onclick="moveDown(this)">下移</button>
					</td>
				</tr>

			</tbody>
		</table>
		<script type="text/javascript">
			<!--
			function moveUp(_a) {
				var _row = _a.parentNode.parentNode;
				//如果不是第一行，则与上一行交换顺序
				var _node = _row.previousSibling;
				while(_node && _node.nodeType != 1) {
					_node = _node.previousSibling;
				}
				if(_node) {
					swapNode(_row, _node);
				}
			}

			function moveDown(_a) {
				var _row = _a.parentNode.parentNode;
				//如果不是最后一行，则与下一行交换顺序
				var _node = _row.nextSibling;
				while(_node && _node.nodeType != 1) {
					_node = _node.nextSibling;
				}
				if(_node) {
					swapNode(_row, _node);
				}
			}

			function swapNode(node1, node2) {
				//获取父结点
				var _parent = node1.parentNode;
				//获取两个结点的相对位置
				var _t1 = node1.nextSibling;
				var _t2 = node2.nextSibling;
				//将node2插入到原来node1的位置
				if(_t1) _parent.insertBefore(node2, _t1);
				else _parent.appendChild(node2);
				//将node1插入到原来node2的位置
				if(_t2) _parent.insertBefore(node1, _t2);
				else _parent.appendChild(node1);
			}

			function del(_btn) {
				var tr = _btn.parentNode.parentNode;
				tr.parentNode.removeChild(tr);
			}
			//-->
		</script>
	</body>

</html>